<template>
    <div class="rfq flex font">
        <AsideVue></AsideVue>
        <div class="box font" :class="{ 'w87': !store.state }">
            <NavVue></NavVue>
            <div class="flex">
                <!-- 左边 -->
                <div class="left pl-10">
                    <p class="ml-10 title f18 ">RFQ LIST</p>
                    <el-table v-el-table-infinite-scroll="load" stripe :data="LeftTable" v-loading="loading"
                        @row-click="table" height="89.5vh" style="width: 100%" :row-class-name="rfqList"
                        class="mt-5 bor pl-10 pr-10">
                        <el-table-column prop="inquiry_id" align="center" label="RFQ ID"  />
                        <el-table-column prop="country.name" align="center" label="CNTY" min-width="100" />
                        <el-table-column prop="items_count" align="center" label="ITEMS" />
                        <el-table-column prop="customer.Customer_type" align="center" label="SUPPLIER" min-width="90" />
                        <el-table-column prop="state" align="center" label="STA" />
                    </el-table>
                </div>
                <!-- 中间 -->
                <Centre ref="strike" :rfqId="rfqId" @save="save">
                </Centre>
                <!-- 右边 -->
                <RightVue></RightVue>
            </div>
        </div>
    </div>
</template>

<script setup>
import AsideVue from '../components/Aside.vue';
import NavVue from '../components/Nav.vue';
import Centre from './components/Centre.vue';
import RightVue from './components/Right.vue';
import { ref } from "vue";
import * as $axios from '../../api/index'
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 加载
const loading = ref(true)

// 接收子组件暴露的方法
const strike = ref()

// 左边部分
const LeftTable = ref([])
const data = {
    token: store.token,
    purchaser: store.type == 3 ? store.userId : '',
    page: 0, //页数
    limit: 25 //显示条数
}
const postLefttable = () => {
    loading.value = true
    if (store.type != 4) {
        $axios.$Inside_polling(data).then(res => {
            loading.value = false
            if (res.Status == 0) {
                LeftTable.value = [
                    ...LeftTable.value,
                    ...res.data.data
                ]
                rfqId.value = rfqId.value ? rfqId.value : res.data.data[0] ? res.data.data[0].inquiry_id : ''
            } else {
                rfqId.value = ''
            }
            // console.log(res.data.data[0].inquiry_id)
        })
    } else {
        $axios.$pollingOutside_polling(data).then(res => {
            loading.value = false
            // if(!res.data.data) return
            // console.log(res)
            LeftTable.value = [
                ...LeftTable.value,
                ...res.data.data
            ]
            rfqId.value = rfqId.value ? rfqId.value : res.data.data[0] ? res.data.data[0].inquiry_id : ''
        })

    }
}

// 上拉加载更多
const load = () => {
    data.page++
    postLefttable()
    // console.log(data.page)
}

// 子组件保存触发
const save = () => {
    loading.value = true
    const data = {
        token: store.token,
        purchaser: store.type == 3 ? store.userId : '',
        page: 1, //页数
        limit: 25 //显示条数
    }
    if (store.type != 4) {
        $axios.$Inside_polling(data).then(res => {
            loading.value = false
            console.log(data)
            LeftTable.value = res.data.data
            rfqId.value = res.data.data[0] ? res.data.data[0].inquiry_id : ''
            console.log(rfqId.value)
        })
    } else {
        $axios.$pollingOutside_polling(data).then(res => {
            loading.value = false
            // if(!res.data.data) return
            console.log(res)
            LeftTable.value = res.data.data
            rfqId.value = res.data.data[0] ? res.data.data[0].inquiry_id : ''
            console.log(rfqId.value)
        })

    }
}

const rfqId = ref()  // 左边表格的id
// 点击表格高亮
const table = (row) => {
    rfqId.value = row.inquiry_id
}
const rfqList = ({
    row,
    rowIndex,
}) => {
    if (row.inquiry_id === rfqId.value) {
        return 'success-row'
    }
    return ''
}

</script>

<style>
.success-row {
    --el-table-tr-bg-color: #eef1f4;
}
</style>

<style lang="less" scoped>
@import './rfq.less';
</style>